<template>
  <FModal ref="FModal" header="列表显示项" @ok="ok" width="950px">
    <div class="field-list-config-wrapper">
      <div class="field-list-config-left">
        <div style="height: 350px; overflow: auto">
          <FList size="small" :selected-key="selectedLeftKey"
                 :data-source="formDefinition.fields"
                 title-name="showName" keyName="tableFieldName"
                 bordered color="rgb(96, 98, 102)"
                 @select="selectedLeftKeyChange"
                 @doubleClick="leftDblclick"
                 search-placeholder="系统数据域">

          </FList>
        </div>
        <div class="field-list-config-border" style="height: 2px"/>
        <div style="height: 350px; overflow: auto">
          <FList size="small" keyName="tableFieldName"
                 :selected-key="selectedLeftKey"
                 :data-source="DefaultSystemFields"
                 title-name="showName"
                 bordered color="rgb(96, 98, 102)"
                 @select="selectedLeftKeyChange"
                 @doubleClick="leftDblclick"
                 search-placeholder="系统数据域">

          </FList>
        </div>
      </div>
      <div class="field-list-config-border" style="width: 5px"/>
      <div class="field-list-config-right">
        <FList size="small" @select="selectedRightKeyChange" keyName="fieldName"
               bordered :data-source="selectedShowFields" color="rgb(96, 98, 102)"
               title-name="showName" :selected-key="selectedLeftKey"
               search-placeholder="列表显示项" @doubleClick="rightDblclick">

        </FList>
      </div>

      <div class="field-list-config-right-bar">
        <div>
          <el-button @click="up" type="primary" icon="ArrowUpBold" circle/>
        </div>
        <div style="margin-top: 15px">
          <el-button @click="down" type="primary" icon="ArrowDownBold" circle/>
        </div>
      </div>
    </div>
  </FModal>
</template>
<script>
import FModal from '@/components/FModal/index.vue';
import FList from '@/components/FList';
import {DefaultFormDefinition, DefaultSystemFields} from '@/components/form/DefaultFormDefinition';
import FormDefinitionHelper from '@/components/form/FromDesigner/FormDefinitionHelper';
import {isEmpty} from '@/utils/CommonUtils';

export default {
  name: "ListFieldConfig",
  components: {
    FList,
    FModal
  },
  data() {
    return {
      DefaultSystemFields,
      selectedLeftKey: undefined,
      formDefinition: JSON.parse(JSON.stringify(DefaultFormDefinition)),
      selectedShowFields: [] //被选中的需要显示的字段
    };
  },
  methods: {
    setData(formDefinition, edittingMenu) {
      this.formDefinition = formDefinition;
      this.edittingMenu = edittingMenu;
      this.$refs.FModal.open();
      this.selectedLeftKey = undefined;
      this.selectedShowFields = [];
      this.resolveSelectedShowFields();
    },
    resolveSelectedShowFields() {
      if (!this.edittingMenu.listField) this.edittingMenu.listField = '';
      let helper = new FormDefinitionHelper(this.formDefinition);
      let fields = helper.findFieldsByNames(this.edittingMenu.listField);
      if (isEmpty(fields)) {
        this.selectedShowFields = [];
        return;
      }
      this.selectedShowFields = fields.map(f => ({
        fieldName: f.tableFieldName,
        showName: f.showName
      }));
    },
    rightDblclick(item) {
      let index = this.selectedShowFields.findIndex(i => i === item);
      if (index !== -1) {
        this.selectedShowFields.splice(index, 1);
      }
    },
    leftDblclick(item) {
      let index = this.selectedShowFields.findIndex(i => i.fieldName === item.tableFieldName);
      if (index !== -1) return;
      this.selectedShowFields.push({
        fieldName: item.tableFieldName,
        showName: item.showName
      });
    },
    selectedLeftKeyChange(item) {
      this.selectedLeftKey = item.tableFieldName;
    },
    selectedRightKeyChange(item) {
      this.selectedLeftKey = item.fieldName;
    },
    down() {
      let index = this.selectedShowFields.findIndex(s => s.id === this.selectedLeftKey);
      if (index < this.selectedShowFields.length - 1) {
        let temp = this.selectedShowFields[index + 1];
        this.selectedShowFields[index + 1] = this.selectedShowFields[index];
        this.selectedShowFields[index] = temp;
      }
    },
    up() {
      let index = this.selectedShowFields.findIndex(s => s.id === this.selectedLeftKey);
      if (index > 0) {
        let temp = this.selectedShowFields[index - 1];
        this.selectedShowFields[index - 1] = this.selectedShowFields[index];
        this.selectedShowFields[index] = temp;
      }
    },
    ok() {
      if (this.selectedShowFields && this.selectedShowFields.length > 0) {
        this.$emit('selected', this.selectedShowFields);
        this.$refs.FModal.close();
      }
    },
  }
};
</script>

<style>
.field-list-config-wrapper {
  display: flex;
  width: 100%;
}

.field-list-config-left {
  flex: 0.5;
}

.field-list-config-right {
  flex: 0.5;
}

.field-list-config-padding {
  width: 50px;
}

.field-list-config-border {
  background: rgb(220, 223, 230);
}

.field-list-config-right-bar {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
